<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1">
    <title></title>
    <style type="text/css">
        * {margin: 0;padding: 0;padding-bottom: 0px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;

            -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
            -webkit-user-select:none; /*webkit浏览器*/
            -khtml-user-select:none; /*早期浏览器*/
            -moz-user-select:none;/*火狐*/
            -ms-user-select:none; /*IE10*/
            user-select:none;
        }
        *:hover,*:active{
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
        }
        body{background-color: #ebebeb;font-size:1em;line-height: 1;padding-bottom:3em;width:100%;font-family: -apple-system-font, "Helvetica Neue", sans-serif;line-height: 1;background-color: #FFFFFF;}
        .row{width:100%;}
        h3{font-size:0.85em;margin-top:1em;color: #666;font-weight: 400;margin-bottom: 0.75em;}
        .specification,.tag{width:100%;}
        .specification ul,.tag ul{list-style-type:none;width:100%;display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;}
        .specification ul li,.tag ul li{padding: 0.5em 1.25em;
            font-size: 0.9em;
            display: block;
            margin-right: 0.5em;
            margin-bottom: 0.5em;
            border: 1px solid #f3f3f3;
            font-weight: 400;
            border-radius: 3px;}
        .specification ul li.select,.tag ul li.select{
            color: #2c53de;
            border: 1px solid #2c53de;}
        .specification ul li.disabled,.tag ul li.disabled{color: #999;}
        .preview{padding: 0.5em 3%;}
    </style>
</head>
<body>
<div class="container" id="container">
    <div class="page js_show home">
        <div class="page preview js_show" id="box">

        </div>
        <div class="page preview js_show" id="tag">

        </div>
    </div>
</div>
<script type="text/javascript">
    var JsonData = <?php echo $json; ?>;
    var productId = '<?php echo $product_id;?>' //当前产品的id
    var sortId = '<?php echo $sort;?>' //当前产品的sort
    var quantity ='<?php echo $quantity;?>'//当前产品数量

    var defaultData = <?php echo $varaint;?>;//{'1': "柚子", '2': "8寸", '3': "超级辣", '4': "非常多"};
    var defaultTagData = <?php echo $tags;?>


    //console.log(JsonData)
    /*JsonData = {
        "property": [
            {
                "product_id": "10",
                "lable": "颜色",
                "value": [
                    "白色",
                    "红色",
                    "灰色",

                ],
                "sort": "1"
            },
            {
                "product_id": "10",
                "lable": "型号",
                "value": [
                    "L",
                    "M"
                ],
                "sort": "2"
            },
            {
                "product_id": "10",
                "lable": "长度",
                "value": [
                    "3cm",
                    "4cm"
                ],
                "sort": "3"
            }
        ],
        "variant": [
            {
                "product_id": "10",
                "property": [
                    {
                        "key": 1,
                        "value": "白色"
                    },
                    {
                        "key": 2,
                        "value": "L"
                    },
                    {
                        "key": 3,
                        "value": "4cm"
                    }
                ],
                "price": "100.00",
                "is_limited": "0",
                'quantity':"1"
            },
            {
                "product_id": "10",
                "property": [
                    {
                        "key": 1,
                        "value": "红色"
                    },
                    {
                        "key": 2,
                        "value": "L"
                    },
                    {
                        "key": 3,
                        "value": "3cm"
                    }
                ],
                "price": "100.00",
                "is_limited": "0",
                'quantity':"1"
            },
            {
                "product_id": "10",
                "property": [
                    {
                        "key": 1,
                        "value": "白色"
                    },
                    {
                        "key": 2,
                        "value": "M"
                    }
                ],
                "price": "100.00",
                "is_limited": "0",
                'quantity':"0"
            },
            {
                "product_id": "10",
                "property": [
                    {
                        "key": 1,
                        "value": "红色"
                    },
                    {
                        "key": 2,
                        "value": "M"
                    },
                    {
                        "key": 3,
                        "value": "3cm"
                    }
                ],
                "price": "100.00",
                "is_limited": "0",
                'quantity':"1"
            }
        ]
    };*/

    var res = []
    var num = 0;
    var number = 0;
    var property = JsonData.property;
    var variant = JsonData.variant;
    var tags = JsonData.tags;
    var box = document.getElementById('box');
    var tag = document.getElementById('tag');

    var test = '';
    //通信对象
    if( ! jsCxsm){
        var jsCxsm = {
            //预览订单
            commit:function(status){
// 					 test = test + status
// 					 box.innerHTML = test;
                try{
                    commit(status)
                }catch(e){
                    test = test +'IOS调用了错误了<br>';
                    test = test + e.name + ": " + e.message;
                    //box.innerHTML = test;
                }

// 					 test = test +'IOS调用了<br>';
// 					 box.innerHTML = test;
            },
        }
// 		 test = test + 'IOS初始化了<br>';
// 		 box.innerHTML = test;
//        document.title = 'jsCxsm对象不存在，则说明你是ios';
    }else{
//        document.title = 'jsCxsm对象存在，则说明你是android';
    }
    //规格
    for(var k in property){
        var divitem = document.createElement('div');
        divitem.setAttribute('class', 'item row');
        divitem.setAttribute('id', 's'+property[k].sort);
        box.appendChild(divitem);
        var h3 = document.createElement('h3');
        divitem.appendChild(h3);
        h3.innerHTML = property[k].lable;
        var specification = document.createElement('div');
        specification.setAttribute('class', 'specification');
        divitem.appendChild(specification);
        var ul = document.createElement('ul');
        specification.appendChild(ul);
        for(var kk in property[k].value){
            var li = document.createElement('li');
            li.innerHTML = property[k].value[kk];
            li.setAttribute('class', '');
            ul.appendChild(li);
        }
    }

    var li = box.getElementsByTagName('li');
    var length = li.length
    for(var i = 0; i < length; i++){
        li[i].onclick = function(){
            select(this,1);
        }
    }
    //标签
    for(var k in tags){
        var divitem = document.createElement('div');
        divitem.setAttribute('class', 'item row');
        divitem.setAttribute('id', 't'+tags[k].sort);
        tag.appendChild(divitem);
        var h3 = document.createElement('h3');
        divitem.appendChild(h3);
        h3.innerHTML = tags[k].tag_name;
        var tagSpe = document.createElement('div');
        tagSpe.setAttribute('class', 'tag');
        divitem.appendChild(tagSpe);
        var ul = document.createElement('ul');
        tagSpe.appendChild(ul);
        for(var kk in tags[k].tag_value){
            var li = document.createElement('li');
            li.innerHTML = tags[k].tag_value[kk];
            li.setAttribute('class', '');
            ul.appendChild(li);
        }
    }

    var li = tag.getElementsByTagName('li');
    var length = li.length
    for(var i = 0; i < length; i++){
        li[i].onclick = function(){
            select(this,2);
        }
    }
    function select(ele,type){

        if(ele != null){
            var classe = ele.getAttribute('class');
            if(classe.indexOf('disabled') > -1){
                return;
            }

            var li = ele.parentNode.getElementsByTagName('li');
            var length = li.length;
            for(var i = 0;i < length; i++){
                if(li[i].getAttribute('class').indexOf('select') > -1){
                    li[i].setAttribute('class', '');
                }
            }

            var selected = true;
            if(classe.indexOf('select') <= -1){
                ele.setAttribute('class', 'select');
            }else if(classe.indexOf('select') > -1){
                ele.setAttribute('class', '');
                var len = getSelectedData().length;//规格
                var len2 = getSelectedTagData().length;//属性
                if(len == 0){
                    init();
                    console.log('一个也没有选')

                    var status = {"status":"0","message":"没有选择","data":{},"edit":{}}
                    status = JSON.stringify(status)
                    jsCxsm.commit(status)
                    return;
                }
                if(len2 == 0){
                    init();
                    var status = {"status":"0","message":"没有选择","data":{},"edit":{}}
                    status = JSON.stringify(status)
                    jsCxsm.commit(status)
                    return;
                }
                selected = false;
            }
        }

        var data = defaultData;
        var dataTag = defaultTagData;
        if(defaultData == null){
            data = getSelectedData();
            dataTag = getSelectedTagData();
        }else{

            for(var k in data){
                var p = document.getElementById('s'+k);
                var li = p.getElementsByTagName('li');
                var len = li.length;
                for(var i = 0;i < len; i ++){
                    if(li[i].innerHTML == data[k]){
                        li[i].setAttribute('class', 'select');
                    }
                }
            }
            for(var k in dataTag){
                var p = document.getElementById('t'+k);
                var li = p.getElementsByTagName('li');
                var len = li.length;
                for(var i = 0;i < len; i ++){
                    if(li[i].innerHTML == data[k]){
                        li[i].setAttribute('class', 'select');
                    }
                }
            }
            defaultData = null;
        }

        var temp = [];
        for(var k in data){
            var key = k;
            var text = data[k];
            for(var kk in variant){
                var tA = variant[kk].property;
                if(variant[kk].quantity <= 0 ) continue;
                var b = false;
                for(var kkk in tA){
                    if(key == tA[kkk].key && tA[kkk].value == text){
                        b = true;
                        break;
                    }
                }

                if(b){
// 					console.log(variant[kk])
                    for(var kkk in tA){
                        var tKey = tA[kkk].key;
                        if(key != tKey){

                            if( ! temp[tKey]){
                                temp[tKey] = [];
                            }

                            if( ! temp[tKey][key]){
                                temp[tKey][key] = [];
                            }
                            temp[tKey][key][temp[tKey][key].length] = tA[kkk].value;
                        }
                    }
                }
            }
        }

        //+-----------------------------------------------
        //| 获取最后的组合
        //+-------------------------------------------------
        for (var va in variant) {
            var is_true = false
            for(var ii in data){

                if (data[ii] != variant[va].property[ii-1].value) {
                    is_true = false
                    break;
                }
                is_true = true
            }

            if (is_true) {
                res = variant[va];
                console.log('---------------')
                console.log(res)
            }
        }
        var tagStr = '|';
        for (var va in tags) {
            var is_tag = false
            for(var it in dataTag){
                for(var kk in tags[va].tag_value){

                    if (dataTag[it] == tags[va].tag_value[kk]) {
//                        tagStr +=  tags[va].tag_name+':'+dataTag[it]+'|';
                        tagStr +=  dataTag[it]+'|';
                        is_tag = false
                        break;
                    }
                }

                is_tag = true
            }

        }
        //是否选项完成
        if ((num > 0 && num == property.length) || (number > 0 && number == tags.length)) {
            //选完
            var label = '';
            if(num>0){

                for (var i = 0; i < res['property'].length; i++) {
                    if(label){
                        label +='/'
                    }
                    label += res['property'][i].value
                }
            }
            var labelTag = '';
            if(number>0){
                labelTag = tagStr;
            }
            if (number != tags.length) {
                return false;
            }
            if (num != property.length) {
                return false;
            }
            var status = {
                "status":"1",
                "message":"选择完成",
                "data":{
                    //app使用参数
                    "price":res['price'],			//组合价格
                    "quantity":res['quantity'],   	//组合数量
                    "label":label,					//规格
                    "tags":labelTag				//属性
                },
                "edit":{
                    //接口参数
// 						"quantity":quantity, [APP重新获取用户输入后传入]
                    "product_id":productId, 	//产品id
                    "sort":sortId,				//产品当前sort
                    "change_sort":res['sort'], 	//选择后的sort
                    "tags":labelTag				//属性
                },
                "add":{
                    "product_id":productId, 	//产品id
                    "sort":res['sort'], 			//选择后的sort
                    "tags":labelTag				//属性
                }
            }

            //$('.container').before('您的参数:'+sortId+productId+'<br>');
            if(typeof setChoice == 'function'){
                setChoice(status)
            }
            status = JSON.stringify(status)

            jsCxsm.commit(status)//回调到list 的 setChangeVariant()方法
// 			test = test + '选择完成<br>';
// 			box.innerHTML = test
        }else{
            //没有选完
            var status = {"status":"0","message":"没有选择","data":{},"edit":{}}
            if(typeof setBase == 'function'){
                setBase()
            }
            status = JSON.stringify(status)
            jsCxsm.commit(status)
        }

        for(var k in temp){
            var tA = getSameValue(temp[k]);
            var p = document.getElementById('s'+k);
            var li = p.getElementsByTagName('li');
            for(var i = 0; i < li.length; i++){
                var b = false;
                for(var j = 0; j < tA.length; j++){
                    if(li[i].innerHTML == tA[j]){
                        b = true;
                    }
                }

                if(b){
                    if(li[i].getAttribute('class').indexOf('select') == -1){
                        li[i].setAttribute('class', '');
                    }
                }else{
                    li[i].setAttribute('class', 'disabled');
                }
            }
        }
    }


    function getSameValue(data){

        var result = new Array();
        var obj = {};
        for(var k in data){
            var temp = data[k];
            var len = temp.length;
            var key = k;
            for (var i = 0; i < len; i++) {
                var bb = true;
                for(var kk in data){
                    var t = data[kk];
                    var b = false;
                    var kkk = kk;
                    for(var j = 0;j < t.length; j++){
                        if(temp[i] == t[j]){
                            b = true;
                            break;
                        }
                    }

                    if( ! b){
                        bb = false;
                        break;
                    }
                }

                if(bb){
                    result.push(temp[i]);
                }
            }
            break;
        }
        return result;
    }

    function getSelectedData(){
        var data = [];
        num = 0;
        var li = box.getElementsByTagName('li');
        var length = li.length;
        var k = 0;
        for(var i = 0;i < length; i ++){
            var c = li[i].getAttribute('class');
            if(c.indexOf('select') > -1){
                data[getParentId(li[i])] = li[i].innerHTML;
                num++;
                k++;
            }
        }

        return data;
    }
    function getSelectedTagData(){
        var data = [];
        number = 0;
        var li = tag.getElementsByTagName('li');
        var length = li.length;
        var k = 0;
        for(var i = 0;i < length; i ++){
            var c = li[i].getAttribute('class');
            if(c.indexOf('select') > -1){
                data[getParentId(li[i])] = li[i].innerHTML;
                number++;
                k++;
            }
        }

        return data;
    }
    function getParent(ele){
        return ele.parentNode.parentNode.parentNode;
    }

    function getParentId(ele){
        return getParent(ele).getAttribute('id').replace('s', '');
    }

    function getliByPidAndText(pid, text){

        var li = document.getElementById('s'+pid).getElementsByTagName('li');
        var len = li.length;
        for(var i = 0;i < len; i++){
            if(li[i].innerHTML == text){
                return li[i];
            }
        }
        return null;
    }

    function getLiByParent(ele){
        return ele.getElementsByTagName('div')[0].getElementsByTagName('ul')[0].getElementsByTagName('li');
    }
    init();
    function init(){
        var p = box.getElementsByTagName('div');
        for(var k in p){
            if(typeof(p[k]) != 'object' || p[k].getAttribute('class').indexOf('item') == -1) continue;
            var id = p[k].getAttribute('id').replace('s', '');
            var li = getLiByParent(p[k]);
            var length = variant.length;
            var lilength = li.length;
            for(var j = 0;j < lilength;j++){
                var selected = false;
                var text = li[j].innerHTML;
                for(var i = 0;i < length;i++){
                    var len = variant[i].property.length;
                    var quantity = variant[i].quantity;
                    if(quantity > 0){
                        for(var k = 0;k < len;k++){
                            var key = variant[i].property[k].key;
                            var value = variant[i].property[k].value;
                            var quantity = variant[i].quantity;
                            if(key == id && text == value){
                                selected = true;
                                break;
                            }
                        }
                    }
                }

                if( ! selected){
                    li[j].setAttribute('class', "disabled");
                }else{
                    li[j].setAttribute('class', "");
                }
            }
        }

        if(defaultData != null)
            select(null);
    }
</script>
</body>
</html>
